<template>
  <div id="app">
    <list v-show="loaded"
          :list="list"
          @select="select"
    ></list>

    <reader :login="dislogin"
            :power="power"
            :role="role"
            :username="username"
            :selected="selected"
            @close="unselect"
            v-if="selected"
    ></reader>

    <wsMessage/>
    <wsInfo/>
    <transition name="fade">
      <wsLogin v-if="dislogin" :dis="dislogin"/>
    </transition>
  </div>
</template>

<script>
import Reader from './components/CMReader'
import List from './components/CMList'
import wsMessage from './components/elements/WSElement/WSMessage'
import wsInfo from './components/elements/WSElement/WSInfo'
import wsLogin from './components/elements/WSElement/WSLogin'
import bus from './assets/EventBus'
export default {
  name: 'App',
  components: {
    Reader,
    List,
    wsMessage,
    wsInfo,
    wsLogin,
  },
  data(){
    return{
      list:[],
      loaded:false,
      selected:false,
      dislogin:true,
      power:'default',
      role:'reader',
      username:''
    }
  },
  methods:{
    select(id){
      this.selected=id;
    },
    unselect(){
      this.selected=false;
    }
  },
  mounted(){
    bus.$on('login',(f,pow,role,username)=>{
      this.dislogin=f;
      this.power=pow;
      this.role=role;
      this.username=username;
    });
    this.$http.get('/api/14ch/comic/getComicList')
      .then(res=>{
        this.list=res.data.list;
        this.loaded=true;
      })
  }
}
</script>

<style>
#app{
  height:100%;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}
</style>
